<template>
    <div id='cart'>
        <header1></header1>
            <div class="total_count">全部商品<em>{{total_count}}</em>件</div>
    <ul class="cart_list_th clearfix">
        <li class="col01">商品名称</li>
        <li class="col03">商品价格</li>
        <li class="col04">数量</li>
        <li class="col05">小计</li>
        <li class="col06">操作</li>
    </ul>
    <ul class="cart_list_td clearfix" v-for="(sku,index) in cart" :key="sku.id">
        <li class="col01"><input type="checkbox" name="ids" v-model="cart_checked" value="sku.id" @click="update_selected(sku)"></li>
        <li class="col02"><img :src="sku.image_url"></li>
        <li class="col03">{{ sku.name }}</li>
        <li class="col05">{{ sku.price }}元</li>
        <li class="col06">
            <div class="num_add">
                <a @click="on_add(sku)" class="add fl">+</a>
                <input v-model="sku.number"  type="text" class="num_show fl">
                <a @click="on_del(sku)" class="minus fl">-</a>
            </div>
        </li>
        <li class="col07">{{sku.price * sku.number}}元</li>
        <li class="col08"><a @click="on_delete(index)">删除</a></li>
    </ul>

    <ul class="settlements">
        <li class="col01"></li>
        <li class="col02"></li>
        <li class="col03">合计(不含运费)：<span>¥</span><em>{{total_selected_amount}}</em><br>共计<b>{{total_selected_count}}</b>件商品</li>
        <li class="col04"><button @click='confirm_pay'>去结算</button></li>
    </ul>
    {{cart_checked}}
    <footer1></footer1>
    </div>
</template>
<script>
import Header1 from '@/components/MD_shop/Header'
import Footer1 from '@/components/MD_shop/Footer'
import {send} from '../../../static/js/oss.js'
import {MD_cart_show,update_cart,MD_bny_info} from '../axios_send/api.js'
export default{
    name:'cart2',
    components:{
		header1:Header1,
		footer1:Footer1
    },
    data(){
        return{
            cart:[],
            total_count:0,
            total_selected_amount:0,
            total_selected_count:0,
            cart_checked:[]//初始一个列表，所有选中的id
        }
    },
    created(){
        this.cartlist()
    },
    methods:{
        cartlist(){
            MD_cart_show().then(res=>{
                console.log(res);
                this.cart =res
            })
        },
        on_add(sku){
            sku.number +=1
            var data={"id":sku.id,"number":sku.number}
            update_cart(data)
            .then(res=>{
                var is_exist =this.cart_checked.indexOf(sku.id)
                console.log(is_exist);
                
                if(is_exist>=0){
                    this.total_selected_amount +=sku.number*sku.price
                    this.total_selected_count += 1
                }
                 
                console.log(res)
            })
        },
         on_del:function(sku,index){
            if(sku.number<=1){
				alert("兄弟没有了，还点啊？")
			}else{
                sku.number-=1
                var data={"id":sku.id,"number":sku.number}
                update_cart(data)
                .then(res=>{
                    var is_exist =this.cart_checked.indexOf(sku.id)
                    if(is_exist>=0){
                        this.total_selected_amount -=sku.number*sku.price
                        this.total_selected_count -= 1
                    }
                    console.log(res)
				})
			}
        },
        confirm_pay(){
            var data = {"buys_info":this.cart_checked}
            MD_bny_info(data)
            .then(res=>{
                console.log(res);
                if(res.code==200){
                    this.$router.push({path:"/order"})
                }
            })
        },
        update_selected(sku){
           var is_exist=this.cart_checked.indexOf(sku.id)
            if(is_exist>=0){
                this.total_selected_count -= sku.number,
                this.total_selected_amount -=sku.number* sku.price
            }else{
               this.total_selected_count += sku.number,
               this.total_selected_amount +=sku.number* sku.price 
            }

        },
        get_cart(){
            MD_cart_show()
            .then(res=>{
                console.log(res);
                this.cart = res.data
                this.total_count = this.cart.length
            })
        }

    },
    // mounted(){
    //     this.get_cart()
    // }
}
</script>